<template>
<template>
    <view class="fans" v-for="(item, index) in props.fansData" :key="item.id">
        <view class="fans-information">
            <image class="fans-information-image" :src="item.avatar" mode="scaleToFill" />
            <view>
                <h1 class="fans-information-h1">{{ item.name }}</h1>
                <text class="fans-information-text">{{ item.grade }} {{ item.major }}</text>
            </view>
        </view>
        <view>
            <button :class="{ 'fans-button--followed': isFollowed[index] }" @click="toggleFollow(index)"
                class="fans-button" type="primary">
                {{ isFollowed[index] ? '已关注' : '+关注' }}</button>
        </view>
    </view>
</template>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'
import type {UserFans} from '@/types/user-details'

const props = defineProps<{
  fansData: UserFans[]
}>()

const isFollowed = ref(Array(props.fansData?.length).fill(false))

const toggleFollow = (id: number) => {
    isFollowed.value[id] = !isFollowed.value[id]
    console.log(id)
}
</script>

<style scoped lang="scss">
.fans {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    &-information {
        display: flex;
        align-items: center;
        gap: 30rpx;

        &-image {
            width: 105rpx;
            height: 105rpx;
            border-radius: 100%;
        }

        &-text {
            font-size: 25rpx;
            color: $uni-text-color-grey;
        }
    }

    &-button {
        background-color: #4fb7ff;
        font-size: 22rpx;
        padding: 0 35rpx;
        border-radius: 100rpx;
        transition: all 0.3s; // 平滑过渡效果

        &--followed {
            background-color: #f2f2f2; // 点击后灰色背景
            color: #666; // 点击后灰色文字
        }
    }
}
</style>